<script setup>
import { isReactive, ref } from 'vue';
import { vShow } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import PersonalInfo from './components/PersonalInfo.vue'
import { gsap } from "gsap";

const page1 = ref(null);
const page2 = ref(null);
const main = ref(null);
const personalInfo = ref(null);

let personalInfoAvailable;
function page1Wheel(e) {
  if (e.deltaY > 0) {
    console.log('向下滚动');
    main.value.style.top = "-100vh";
    window.myUnity.SendMessage("character", "changeSence1To2");
    personalInfoAvailable = personalInfo.value.scrollHeight - window.innerHeight;
    console.log("personalInfo可滚动:",personalInfoAvailable)
  } else {
    console.log('向上滚动');
  }
}

let page2TranslateY = 0;

function page2Wheel(e) {
  const offset = e.deltaY > 0 ? e.deltaY:-(e.deltaY);
  if (e.deltaY > 0) {
    //这里先滚后判断并还原是为了有一个到底回弹的动画，如果是触发事件（翻页），就需要先判断在滚动
    gsap.to('.page2', { y: (page2TranslateY -= offset) });
    if (personalInfoAvailable < 0) {
      page2TranslateY = 0;
      gsap.to('.page2', { y: page2TranslateY });
    }else if(page2TranslateY <(-personalInfoAvailable)) { 
      page2TranslateY = -personalInfoAvailable;
      gsap.to('.page2', { y: page2TranslateY });
    }
  } else {
    gsap.to('.page2', { y: (page2TranslateY += offset) });
    if (page2TranslateY >= 0) { 
      window.myUnity.SendMessage("character", "changeSence2To1");
      main.value.style.top = "0px";
      page2TranslateY = 0;
      gsap.to('.page2', { y: 0 });
    }
  }
}

function getTouchstartY() {
  this.startY = event.changedTouches[0].pageY  //将手指对应的y轴坐标赋值给data中的startY
}
function touchmove() {
  // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
  // event.preventDefault()
  let moveEndY = event.changedTouches[0].pageY
  let Y = moveEndY - this.startY  //如果值为正,则代表手指下滑,反则则为上滑,为0则表示点击
  if (Y > 0) {
    console.log('下滑' + Y)
  } else if (Y < 0) {
    console.log('上滑' + Y)
    main.value.style.top = "-100vh";
    //     console.log(window.myUnity)
    window.myUnity.SendMessage("character", "changeSence1To2");
  } else {
    // console.log('just touch')
  }
}

</script>

<template>
  <header>
    <div class="headerParent">
      <div class="headerLeft">
        <img alt="Vue logo" class="logo" src="./assets/logo.svg" />
      </div>
      <div class="headerRight">
        <div class="musicBtn">
          <div class="musicBtnIcon">
            <svg viewBox="0 0 11 9">
              <g fill="white">
                <path id="sound-body-path"
                  d="M 0 4 C 0 4 0 3 1 3 L 2 3 L 3 2 C 5 0 5 1 5 2 L 5 7 C 5 8 5 9 3 7 L 2 6 L 1 6 C 0 6 0 5 0 5 L 0 4">
                </path>
                <path id="sound-volume-0-path" d="M 7 4 C 8 4 8 5 7 5 C 6 5 6 6 7 6 C 9 6 9 3 7 3 C 6 3 6 4 7 4"></path>
                <path id="sound-volume-1-path" d="M 7 2 C 10 2 10 7 7 7 C 6 7 6 8 7 8 C 11 8 11 1 7 1 C 6 1 6 2 7 2">
                </path>
              </g>
            </svg>
          </div>
        </div>

        <div class="menuBtn">
          <div class="menuBtmItem"></div>
          <div class="menuBtmItem"></div>
          <div class="menuBtmItem"></div>
        </div>
      </div>
    </div>
  </header>
  <main ref="main">
    <div ref="page1" class='page1' @wheel="page1Wheel" @touchstart="getTouchstartY()" @touchmove="touchmove()">
      <div class='page1Font1'>Hi</div>
      <div class='page1Font1'>this is page1</div>
      <div class='page1Font2'>font 3vh</div>
    </div>
    <div ref="page2" class='page2' @wheel='page2Wheel'>
      <div ref="personalInfo" id='personalInfo'>
        <PersonalInfo></PersonalInfo>
      </div>
      <hr />
      <div>
        <ul>
          <li>11</li>
          <li>22</li>
          <li>33</li>
          <li>44</li>
          <li>55</li>
        </ul>
      </div>
    </div>
  </main>
</template>

<style scoped>
.page1 {
  top: 0;
  padding-top: 12%;
  padding-left: 5%;
  height: 100vh;
}

.page2 {
  top: 0;
  padding-top: 1%;
  padding-left: 5%;
  transform: translate(0px, 0px);
  /* transition: left 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), top 700ms cubic-bezier(0.6, 0, 0.4, 1); */
  /* background-color: blanchedalmond; */
}

.page1Font2 {
  font-size: 3vh;
}

.page1Font1 {
  font-size: 6vh;
}

main {
  display: flex;
  flex-direction: column;
  top: 0;
  transition: top 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.menuBtmItem {
  width: 1.5rem;
  height: 0.2rem;
  background-color: white;
}

.menuBtn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background-color: #ff923e;
  border-radius: 20%;
  padding: 0.4rem;
}

.headerParent {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  justify-content: space-between;
  margin: 1rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .headerParent {
    left: 12rem;
    right: 12rem;
  }
}

.headerLeft {
  display: flex;
}

.headerRight {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 5.6rem;
}

.logo {
  width: 2.2rem;
  height: 2.2rem;
}

.musicBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background-color: #ff923e;
  border-radius: 20%;
}

.musicBtnIcon {
  width: 1.8rem;
  margin-top: 0.2rem;
}
</style>
